<template>
	<view class="me-box">
		<view class="header-box">
			<view class="avatar">
				<image class="avatar-img" src="../../static/img/avatar.png" mode=""></image>
			</view>
			<view class="name-phone">
				<view v-if="userInfo.name" class="name">{{ userInfo.name }}</view>
				<view v-if="userInfo.phone" class="phone">{{ userInfo.phone }}</view>
			</view>
		</view>
		<view class="item-box">
			<view class="item" v-for="(item,index) in item" :key="index" @click="itemClick(item)">
				<view class="icon-label">
					<view :class="'icon iconfont ' + item.icon"></view>
					<view class="label">{{ item.label }}</view>
				</view>
				<view class="icon-badge">
					<view v-if="item.badge" class="badge">{{item.badge}}</view>
					<view class="right-icon iconfont icon-youjiantou"></view>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
	    onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import { ref } from "vue";
	import { getUserInfo, removeUserInfo } from "@/utils/getUserInfo.js"
	import { GetMyBobao } from "@/configure/api/bobao.js"
	
	onLoad((detail)=>{
		
	})
	
	const userInfo = ref({
		id: '',
		name: '',
		phone: ''
	})
	
	const item = ref([
		{
			icon: 'icon-chukuguanli',
			label: '仓库管理',
			value: '仓库管理',
			badge: ''
		},
		{
			icon: 'icon-xinruku',
			label: '库存管理',
			value: '库存管理',
			badge: ''
		},
		{
			icon: 'icon-yuyinbobao',
			label: '播报管理',
			value: '播报管理',
			badge: ''
		},
		{
			icon: 'icon-tuichudenglu1',
			label: '退出登录',
			value: '退出登录',
			badge: ''
		},
	])
	
	const itemClick = (itemObj) => {
		if(itemObj.label == '发货订单'){
			uni.navigateTo({url:`/pages/me/fahuo/fahuo`})
		}else if(itemObj.label == '仓库管理'){
			uni.navigateTo({url:`/pages/me/cangku/cangku`})
		}else if(itemObj.label == '库存管理'){
			uni.navigateTo({url:`/pages/me/kucun/kucun`})
		}else if(itemObj.label == '播报管理'){
			uni.navigateTo({url:`/pages/me/bobao/bobao`})
		}else if(itemObj.label == '退出登录'){
			uni.showModal({
				title: '提示',
				content: '确认退出?',
				success: function (res) {
					if (res.confirm) {
						removeUserInfo()
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			
		}
	}
	
	const GetMyBobaoFun = async() => {
		let res = await GetMyBobao({userid: userInfo.value.id});
			res = res.data;
		
		item.value.forEach((v,i) => {
			if(v.label == '播报管理'){
				if(res == '0'){
					item.value[i].badge = '今日未播报'
				}else{
					item.value[i].badge = ''
				}
				
			}
			
		})
	}
	
	onShow((detail)=>{
		getUserInfo().then((res)=>{
			userInfo.value = res;
			let hasFaHuo = item.value.filter(v=>v.label == '发货订单')
			
			if(res.fahuo == '1' && !hasFaHuo.length){
				item.value.unshift({
					icon: 'icon-cangpeitubiao_fahuohuanhuofahuo',
					label: '发货订单',
					value: '发货订单',
					badge: ''
				})
			}
			GetMyBobaoFun()
		})
	})
</script>

<style lang="scss">
	.me-box{
		width: 100%;
		min-height: 100%;
		background-color: #fff;
		
		.header-box{
			width: 100%;
			height: 230rpx;
			padding-left: 30rpx;
			background-image: -webkit-linear-gradient( -48deg, rgb(53,173,246) 0%, rgb(12,132,251) 100%);
			@include flex-start();
			
			.avatar{				
				overflow: hidden;
				margin-right: 30rpx;
				
				.avatar-img{
					width: 135rpx;
					height: 135rpx;
					border: 2px solid #fff;
					border-radius: 300rpx;
				}
			}
			
			.name,.phone{
				font-size: 30rpx;
				color: #fff;
				font-weight: bold;
			}
			
			.name{
				margin-bottom: 20rpx;
			}
		}
		
		.item-box{
			width: 100%;
			padding: 30rpx;
			box-sizing: border-box;
			.item{
				border-bottom: 1px solid #ececec;
				width: 100%;
				padding: 30rpx 0;
				@include flex(row,space-between,center);
				
				.icon-label{
					@include flex-start();
					
					.icon{
						font-size: 30rpx;
						color: #333;
						margin-right: 20rpx;
					}
					
					.label{
						font-size: 30rpx;
						color: #333;
					}
				}
				
				.icon-badge{
					@include flex-start();
					
					.badge{
						background-color: var(--dangerColor);
						color: #fff;
						font-size: 24rpx;
						padding: 5rpx 15rpx;
						border-radius: 20rpx;
					}
					.right-icon{
						font-size: 30rpx;
						color: #A4AFC3;
					}
				}
				
			}
		}
	}

</style>
